<section id="cEnd" class="ml-24 mr-24">
  <hl-page-header title="企业广场">
    <hl-button  @on-click="industryConfig" type="outline">行业配置</hl-button>
    <hl-button  @on-click="addCompany" type="outline">新增企业</hl-button>
  </hl-page-header>
  <!-- //搜索部分 -->
  <div class="clearfix mt-15 search-container-house border-b pb-10">
    <div class="pull-left">
      <p class="color-cfcfcf">信息检索</p>
      <div class="search-text">
        <span class="icon-Gm-search"></span>
        <input type="text" v-model="keyword" placeholder="发布标题" />
      </div>
    </div>
		<div class="pull-left ml-24">
		  <p class="color-cfcfcf">所属行业</p>
			<hl-select :data="industryArr" v-model="industryActive" width="140" @on-change="selIndustry"></hl-select>
		</div>
    <div class="pull-left ml-24">
      <p style="color:#fff;">/</p>
      <hl-button @on-click="companyDt" size="mini">查询</hl-button>
      <hl-button @on-click="resetDt" size="mini">重置</hl-button>
    </div>
  </div>

	<!-- tab -->
	<div class="jwk-tab clearfix border-l border-r">
		<div class="jwk-tab-li cursor border-t border-b" @click="tabScreen(item)" :class="{active: auditState == item.state, 'border-l': index > 0}" v-for="(item, index) in tabArr">{{ item.name }}({{ item.count }})</div>
	</div>

  <!-- //主体列表 -->
  <div class="house-sharing-list clearfix">
    <div class="house-left">
      <div class="house-scroll">
        <div class="house-title">
          <div class="dy-flex">
						<div class="dy-fx-1 cursor" v-if="checkFlag" @click="checkAllEvent"><span class="hl-checkbox" :class="{active: checkRight}"></span> 全选</div>
            <div class="dy-fx-1">序</div>
            <div class="dy-fx-2">公司名称</div>
            <div class="dy-fx-2">所属行业</div>
            <div class="dy-fx-3 cursor" @click="createTime">创建时间
              <span :class="{'icon-Gm-sort-default': orders == '#' || columns == 'UT', 'icon-Gm-sort-ascending': orders == 'A' && columns == 'CT', 'icon-Gm-sort-descending': orders == 'D' && columns == 'CT'}">
                <span class="path1"></span><span class="path2"></span>
              </span>
            </div>
            <div class="dy-fx-3 cursor" @click="updateTime">最后更新时间
              <span :class="{'icon-Gm-sort-default': (orders == '#') || columns == 'CT', 'icon-Gm-sort-ascending': orders == 'A' && columns == 'UT', 'icon-Gm-sort-descending': orders == 'D' && columns == 'UT'}">
                <span class="path1"></span><span class="path2"></span>
              </span>
            </div>
            <div class="dy-fx-2">状态</div>
            <div class="dy-fx-2">创建人</div>
						<div class="dy-fx-2" v-if="!checkFlag">操作</div>
          </div>
        </div>
        <div class="dy-flex color-666 house-two-tone text-center" v-for="(item, index) in data.companys">
					<div class="dy-fx-1" v-if="checkFlag"><span class="hl-checkbox cursor" :class="{active: companyIds.indexOf(item.id) > -1}" @click="singleSelection(item)"></span></div>
          <div class="dy-fx-1">{{ index+1 }}</div>
          <div class="dy-fx-2 ellipsis-1">{{ item.companyName || '--' }}</div>
          <div class="dy-fx-2">{{ item.industryName || '--' }}</div>
          <div class="dy-fx-3">{{ item.createTime | framtTime }}</div>
          <div class="dy-fx-3">{{ item.updateTime | framtTime }}</div>
          <div class="dy-fx-2">{{ item.auditState | auditState }}</div>
          <div class="dy-fx-2 ellipsis-1">{{ item.createUserName || '--' }}</div>
					<div class="dy-fx-2" v-if="!checkFlag">
						<a href="javascript:;" class="mr-5" v-if="item.auditState == 'WA'" @click="listRight(item)" v-show="quanxian.indexOf('c233') > -1">通过</a>
						<a href="javascript:;" class="mr-5" v-if="item.auditState == 'WA'" @click="listReject(item)" v-show="quanxian.indexOf('c233') > -1">拒绝</a>
						<a href="javascript:;" @click="companyInfoDt(item)">详情</a>
						<a href="javascript:;" class="ml-5" v-if="item.auditState == 'PA'" @click="del(item)">删除</a>
					</div>
        </div>
      </div>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{data.totalCount}}</i>条记录</span>
      <span>每页
			<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="eventPage"></hl-select>

      条</span>
    </div>
    <div class="pull-right">
      <ul class="page" id="page"></ul>
    </div>
  </div>

	<div class="btn-box mt-15" v-if="auditState == 'WA'">
		<button class="n-btn-primary br-4" v-if="!checkFlag" @click="batchApproval" v-show="quanxian.indexOf('c234') > -1">批量审核</button>
		<button class="n-btn-primary br-4 mr-5" v-if="checkFlag" @click="moreRight">审核通过</button>
		<button class="n-btn-primary br-4 mr-5" v-if="checkFlag" @click="moreReject">审核拒绝</button>
		<button type="button" class="btn n-btn-outline" v-if="checkFlag" @click="cancelBatchApproval">取消</button>
	</div>

  <div class="jwk-detail-pop" v-if="flag">
		<div class="jwk-detail">
			<div class="title">企业详情</div>
			<div class="close icon-Gm-close" @click="closeInfo"></div>
			<div class="content">
				<div class="clearfix">
					<div class="pull-left" style="width: 290px;">
						<div class="dy-flex pt-10 pb-10">
							<div class="dy-fx-1 color-999">公司名称：</div>
							<div class="dy-fx-3 color-666">
								{{ companyInfo.companyName }}
								<span class="inline" style="padding:0 5px;height:20px;background:rgba(255,228,205,1);border-radius:2px;color:rgba(244,133,85,1);">{{ companyInfo.industryName }}</span>
							</div>
						</div>
						<div class="dy-flex pt-10 pb-10">
							<div class="dy-fx-1 color-999">服务：</div>
							<div class="dy-fx-3 color-666">
								<span class="mr-10" v-for="item in companyInfo.serve" v-if="companyInfo.serve.length">{{ item }}</span>
								<span v-if="!companyInfo.serve.length">--</span>
							</div>
						</div>
						<div class="dy-flex pt-10 pb-10">
							<div class="dy-fx-1 color-999">需求：</div>
							<div class="dy-fx-3 color-666">
								<span class="mr-10" v-for="item in companyInfo.demand" v-if="companyInfo.demand.length">{{ item }}</span>
								<span v-if="!companyInfo.demand.length">--</span>
							</div>
						</div>
					</div>
					<div class="pull-right" style="width: 105px;height: 105px;">
						<img :src="companyInfo.logo" alt="LOGO" class="logo">
					</div>
				</div>
				<div class="clearfix pt-10">
					<div class="pull-left color-999" style="width: 72.5px;">简介：</div>
					<div class="pull-left color-666" style="width: 389px;">{{ companyInfo.introduce }}</div>
				</div>
			</div>
			<div class="text-center ptb-10" v-if="companyInfo.auditState != 'RJ'">
				<button class="n-btn-primary br-4 mr-24" v-if="companyInfo.auditState == 'WA'" @click="infoRight" v-show="quanxian.indexOf('c233') > -1">审核通过</button>
				<button class="n-btn-primary br-4 mr-24" v-if="companyInfo.auditState == 'PA'" @click="goEdit">编辑</button>
				<button class="n-btn-outline br-4" v-if="companyInfo.auditState == 'WA'" @click="infoReject" v-show="quanxian.indexOf('c233') > -1">审核拒绝</button>
				<button class="n-btn-outline br-4" v-if="companyInfo.auditState == 'PA'" @click="infoDel">删除</button>
			</div>
		</div>
	</div>

	<div class="refuse-pop" v-if="refuseFlag">
		<div class="refuse-box">
			<div class="title">企业详情</div>
			<div class="close icon-Gm-close" @click="hidePopRefuse"></div>
			<div class="content">
				<textarea rows="5" class="form-control" placeholder="审核不通过原因说明（必填）" v-model="refuseMemo"></textarea>
			</div>
			<div class="text-center ptb-10">
				<button class="n-btn-primary br-4 mr-24" @click="oneRejectRight">确定</button>
				<button class="n-btn-outline br-4" @click="hidePopRefuse">取消</button>
			</div>
		</div>
	</div>

</section>

<script src="modules/workbench/scripts/jwkSquare.js" charset="utf-8"></script>

<style media="screen">
	.refuse-pop {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0,0,0,.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	.refuse-box {
		width: 500px;
		background: #fff;
		position: relative;
		border-radius: 4px;
	}
	.refuse-box .title {
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	.refuse-box .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 14px;
	}
	.refuse-box .content {
		padding: 15px 20px;
		background:rgba(249,249,249,1);
	}
	.jwk-tab {
		display: inline-block;
		overflow: hidden;
		margin-top: 10px;
		border-radius: 4px;
	}
	.jwk-tab .jwk-tab-li {
		width: 106px;
		line-height: 30px;
		float: left;
		text-align: center;
		color: #666;
	}
	.jwk-tab .jwk-tab-li.active {
		background: rgba(86,94,153,1);
		border-color: rgba(86,94,153,1);
		color: #fff;
	}
  .jwk-detail-pop {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    display: flex;
		justify-content: center;
		align-items: center;
  }

	.jwk-detail {
		width: 510px;
		background: #fff;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	.jwk-detail .title {
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	.jwk-detail .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 14px;
	}
	.jwk-detail .content {
		background:rgba(249,249,249,1);
		padding: 10px 24px 20px;
	}
	.jwk-detail .logo {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #fff;
		display: block;
	}

  h4 {
    margin: 0;
  }
  .color-cfcfcf {
    color: #cfcfcf;
  }
  .search-container-house {
    position: relative;
  }
  .show-hide-term {
    width: 59px;
    height: 30px;
    line-height: 30px;
    color:rgba(244,174,71,1);
    margin-top: 5px;
    position: absolute;
    right: 0;
    bottom: 10px;
    background:rgba(244,174,71,0.3);
    border-radius:4px;
    text-align: right;
    padding-right: 5px;
  }
  .search-container-house .icon-turn-right {
    display: inline-block;
    transform: translate( -5px, 0) rotate(90deg);
  }
  .search-text {
    background:rgba(249,249,249,1);
    height: 34px;
    position:relative;
    width: 220px;
    border-radius: 4px;
  }
  .search-text span {
    position:absolute;
    left: 8px;
    top: 0;
    line-height: 34px;
  }
  .search-text input {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    outline: medium;
    text-indent: 25px;
  }

  .house-sharing-text span {
    background:rgba(249,249,249,1);
    box-shadow: none;
    border: 0;
    color: #666;
  }
  input::-webkit-input-placeholder {
    color: #999;
  }
  input:-moz-placeholder {
    color: #999;
  }
  input:-ms-input-placeholder {
    color: #999;
  }
  .house-sharing-list {
    margin: 10px 0 0;
    overflow: hidden;
    text-align: center;
    border-radius: 4px;
    border: 1px solid rgba(235,235,235,1);
  }
  .house-sharing-list .house-left {
    line-height: 40px;
  }
  .house-title {
    background:rgba(240,242,255,1);
    color:rgba(165,170,183,1);
  }

  .house-two-tone:nth-child(2n+1), .house-operate:nth-child(2n+1) {
    background:rgba(249,249,249,1);
  }
  .house-two-tone:hover {
    background:rgba(240,240,247,1) !important;
  }
</style>
